{% extends 'base.html' %}
{% load static %}
{% block title %} Login {% endblock %}
{% block content %}
    <h3>登录页面</h3>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-lg-offset-3">
                <form>
                    {# 以ajax方式提交数据 #}
                    {% csrf_token %}

                    <div class="form-group">
                        <label for="user">用户名</label>
                        <input type="text" id="user" placeholder="输入用户名" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="pwd">密码</label>
                        <input type="password" id="pwd" placeholder="输入密码" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="valid_code">验证码</label>
                        <div class="row">
                            <div class="col-md-6">
                                <input type="text" class="form-control" id="valid_code">
                            </div>
                            <div class="col-md-6">
                                {# 也可以使用滑动验证，极验验证sdkdemo,需要安装social-auth-app-django模块， #}
                                <img width="270" height="36" id="valid_code_img" src="{% url 'get_validcode_img' %}" alt="">
                            </div>
                        </div>
                    </div>
                    <input type="button" class='btn btn-default login_btn' value="登录"><span class="error"></span>
                    <a href="{% url 'register' %}" class='btn btn-success pull-right'>注册</a>

                </form>
            </div>
        </div>

    </div>

{% endblock %}


{% block js %}
{#    <script src="{% static 'jquery/jquery-3.3.1.min.js' %}"></script>#}
    <script>
        {# 验证码图片刷新 #}
        $('#valid_code_img').click(function () {
            $(this)[0].src+="?"
        });

        {# 登录 验证 #}
        $(".login_btn").click(function () {
            $.ajax({
            url:"",
            type:"post",
            data:{
                user:$("#user").val(),
                pwd:$("#pwd").val(),
                valid_code:$("#valid_code").val(),
                csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
            },
            success:function (data) {
                {#console.log(data);#}
                if(data.user) {
                    if (location.search) {
                        location.href = location.search.slice(6)
                    }
                    else {
                        location.href = "{% url 'index' %}"
                    }
                }
                else {
                    $(".error").text(data.msg).css({'color':'red',"margin-left":'10px'});
                    {# 一秒后清空 #}
                    setTimeout(function () {
                        $(".error").text("");
                    }, 1000)
                }
            }
            })
        });

    </script>
{% endblock %}